import SwiftUI

struct Q1: View {
    @State var alignment: Alignment = .center
    
    @State var opacity: Double = 1
    
    var body: some View {
        makeBigTitle()
        makeSubTitle()
        makeDescription()
        makeDemoView()
    }
}

extension Q1 {
    func makeBigTitle() -> some View {
        Text("ZStack")
            .font(.largeTitle)
            .padding(.bottom, 10)
    }
    func makeSubTitle() -> some View {
        Text("Layering & Aligning")
            .font(.title2)
            .foregroundColor(.gray)
    }
    func makeDescription() -> some View {
        Text("ZStacks are great for layering views. For example, putting text on top of an image.")
            .font(.title2)
            .padding()
            .foregroundColor(.white)
            .frame(maxWidth:.infinity)
            .background(Color.green)
    }
    
    func makeDemoView() -> some View {
        VStack {
            Button(action: {
                if opacity == 1 {
                    opacity = 0
                }
                else {
                    opacity = 1
                }
            },label: {
                makeImageView()
            })
            
            Text("But what if you wanted to have all the views align to the bottom?")
                .font(.title2)
                .padding()
            
                .frame(maxWidth: .infinity)
                .foregroundColor(.white)
                .background(Color.green)
                .opacity(opacity)
            
            makeButtonsView()
        }
    }
    
    func makeImageView() -> some View {
        ZStack(alignment: alignment) {
            Image("Mountain")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding(.top, 10)
                .padding(.bottom, 10)
            Text("Yosemite National Park")
                .font(.title)
                .padding()
            // .frame(maxWidth: .infinity)
                .background(Color.white.opacity(0.6))
                .foregroundColor(.black)
        }
    }
    func makeButtonsView() -> some View {
        VStack {
            makeTopRowView()
            makeRowView()
            makeBottomRowView()
        }
    }
    
    func makeTopRowView() -> some View {
        HStack {
            Button(action:{
                alignment = Alignment.topLeading
            }, label:{
                Text("Top Leading")
                    .foregroundColor(.black)
                // .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
            
            Spacer()
            
            Button(action:{
                alignment = Alignment.top
            }, label:{
                Text("Top")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
            Spacer()
            Button(action:{
                alignment = Alignment.topTrailing
            }, label:{
                Text("Top Trailing")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
        }
        .padding(.horizontal)
        .padding(.top, 10)
    }
    
    func makeRowView() -> some View {
        HStack {
            Button(action:{
                alignment = Alignment.leading
            }, label:{
                Text("Leading")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
            Spacer()
            Button(action:{
                alignment = Alignment.center
            }, label:{
                Text("Center")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
            Spacer()
            Button(action:{
                alignment = Alignment.trailing
            }, label:{
                Text("Trailing")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
        }
        .padding(.horizontal)
        .padding(.top, 10)
    }
    
    func makeBottomRowView() -> some View {
        HStack {
            Button(action:{
                alignment = Alignment.bottomLeading
            }, label:{
                Text("Bottom Leading")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
            Spacer()
            Button(action:{
                alignment = Alignment.bottom
            }, label:{
                Text("Bottom")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
            Spacer()
            Button(action:{
                alignment = Alignment.bottomTrailing
            }, label:{
                Text("Bottom Trailing")
                    .foregroundColor(.black)
                    .padding()
                    .frame(width: 100, height: 75)
                    .background(Color.yellow.opacity(0.6))
                    .cornerRadius(9)
            })
        }
        .padding(.horizontal)
        .padding(.top, 10)
    }
}
